<template>
  <div class="class_wrap_detail">
    <div class="class_wrap_bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>周报管理</el-breadcrumb-item>
        <el-breadcrumb-item @click.native="goback" class="class_link"
          >个人项目统计</el-breadcrumb-item
        >
        <el-breadcrumb-item>查看参与项目</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="class_wrap_title">
      <h3>{{ userName }}</h3>
      <span>个人项目工时总计:{{ count }}</span>
    </div>
    <el-table :data="tableData" border>
      <el-table-column label="ID" prop="id" align="center"></el-table-column>
      <el-table-column
        label="项目名称"
        prop="name"
        align="center"
      ></el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        align="center"
      ></el-table-column>
      <el-table-column
        label="项目类型"
        prop="preSale"
        align="center"
        :formatter="getPreSale"
      ></el-table-column>
      <el-table-column
        label="项目已用总工时"
        prop="projectTotalTime"
        align="center"
      ></el-table-column>
      <el-table-column
        label="个人已用总工时"
        prop="personTotalTime"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getProjectInfoByUid } from "@/service/stageApi";

export default {
  name: "showProjectDetail",
  components: {},
  props: ["uid"],
  data() {
    return {
      tableData: [],
      count: 0,
      userName: "",
    };
  },
  created() {
    this.init();
  },
  methods: {
    getPreSale(val) {
      let str = "";
      switch (val.preSale) {
        case 0:
          str = "售前项目";
          break;
        case 1:
          str = "售前项目转为的正式项目";
          break;
        case 2:
          str = "新建的正式项目";
          break;
      }
      return str;
    },
    goback() {
      this.$emit("back");
    },
    init() {
      getProjectInfoByUid(this.uid).then((res) => {
        if (res.code == 0) {
          this.userName = res.data.name;
          this.count = res.data.totalTime;
          this.tableData = res.data.list;
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style   scoped>
.class_wrap_detail {
  height: 100%;
  width: 100%;
}
.class_wrap_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  background-color: #eee;
  padding: 0px 20px;
}
.class_wrap_title h3 {
  font-weight: 600;
}
.class_wrap_bread {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
</style>
<style >
.class_link .el-breadcrumb__inner {
  cursor: pointer;
  font-weight: 600;
}
</style>